<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			.box1{
				width: 250px;
				height: 250px;
				background-color: #e4393c;
				/*声明一个相对定位*/
				position: absolute;
				left: 10px;
				top: 10px;
				background: url(img/png1.jpg);
				/*堆叠 z-index  针对所有的*/
				z-index: 1;
			}
			.box2{
				width: 250px;
				height: 250px;
				background: url(img/png2.jpg);
				background-size:100%;
				position: absolute;
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位  相对于父元素定位
		 功能：单一元素定位 推荐
		 position属性：relative；声明元素可以同相对定位意义
		 方向属性：left  right  top  bottom
		 堆叠顺序属性：z-index
		   属性值数值越大 越靠前
		     绝对定位：按照定位祖先【页面左上角】进行定位
			 功能：脱离文档流，不占据原空间
			 方向属性和叠加属性和相对以及固定定位共用
			 position属性：absolute；声明文员可以使用绝对定位
		 -->
		 <div class="box1">
		 	
		 </div>
		 <div class="box2">
		 	
		 </div>
	</body>
</html>